<template>
    <div>
        <router-view></router-view>

        <!-- 动态路由 -->
        <router-link to="/home">首页</router-link>
        <router-link to="/my/123">我的</router-link>
        <div>获取动态路由传递的参数：{{ $route.params }}</div>

        <br><br>

        <!-- 编程式导航 -->
        <button @click="home">编程式导航：query</button>
        <div>template 获取参数： {{ $route.query }}</div>
        <div>js 获取参数： {{ route.query }}</div>




        <button @click="my">编程式导航：params </button>
        <div>template 获取参数： {{ $route.params }}</div>
        <div>js 获取参数： {{ route.params }}</div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
/**
 * useRoute()函数：用于获取当前路由的信息、返回一个包含当前路由信息的对象、例如：跳转传递的参数、
 */
const route = useRoute()
/**
 * useRouter()函数：用于获取路由实例、通过它进行动态的路由操作、例如跳转、
 *                 返回一个包含路由实例的对象、其中包含当前路由信息
 */
const router = useRouter()


/**
 *  编程式导航 query
 */
function home() {
    /**
     * 1、直接跳转
     */
    // router.push('/home')

    /**
     * 2、跳转传递参数
     */
    router.push({
        // 路由跳转
        path: '/home',    // 可通过映射路径跳转
        // name:'home,'  // 可通过name名称跳转、前提是路由中存在name

        // 传递参数
        query: { id: 1, name: 'zhangsan' }
    })

    /**
     * 3、获取传递参数
     */
    console.log(route.query);

    /**
     * 4、页面前进后退
     */
    // router.go()      正数是前进 1为前进1步、负数为后退 -1为后退1步
    // router.back()    相当于 router.go(-1)
    // router.forward() 相当于 router.go(1)


    /**
     * 5、获取所有路由记录
     */
    console.log(router.getRoutes());


    /**
     * 6、判断路由是否存在
     */
    console.log(router.hasRoute('home'));



    /**
     * 7、添加路由
     */
    router.addRoute({
        name: 'ref', path: '/ref', component: () => import('../01_数据处理_响应式/ref.vue')
    })
    console.log(router.getRoutes());


    /**
     * 8、删除路由
     *    传入路由唯一 name 删除路由
     */
    router.removeRoute('ref')
    console.log(router.getRoutes());
}




function my() {
    router.push({
        path: '/my',
        params: { id: 2, name: 'lisi' }
    })

    // 获取params传递的参数
    console.log(route.params);
}







</script>

<style lang="scss" scoped></style>